<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="icon" href="./images/favicon.ico">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="header">
        <div class="header-container">
            <div class="topbar-left">
                <a href="#">小米网</a>
                <span class="sep">|</span>
                <a href="#">MIUI</a>
                <span class="sep">|</span>
                <a href="#">米聊</a>
                <span class="sep">|</span>
                <a href="#">游戏</a>
                <span class="sep">|</span>
                <a href="#">多看阅读</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">小米网移动版</a>
                <span class="sep">|</span>
                <a href="#">Select region</a>
                <span class="sep">|</span>
                <a href="#">米粉节答疑</a>
            </div>
            <div class="topbar-right">
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="search">
            <div class="search-container">
                <div class="mi-logo">
                    <a href="#">
                        <span></span>
                    </a>
                </div>
                <div class="shop-right">
                    <span class="purchase">
                        <i class="iconfont time"></i>
                        <span>4月14日开放购买</span>
                    </span>
                    <button class="car">
                     <i class="iconfont shop-car"></i>
                     <span>购物车</span>
                     </button>   
                </div>
                <div class="top-search">
                    <form action="">
                        <input type="text"
                                placeholder="搜索您需要的商品  小米手环 耳机音箱 保护壳"
                        >
                        <button>
                            <i></i>
                        </button>
                    </form>
                </div>
               
            </div>
        </div>
        <div class="menu">
            <div class="menu-container">
                <div class="left-menu">
                    <div class="quan">
                        <a href="#">全部商品分类</a>
                    </div>
                    <div class="gou">
                        <ul>
                            <li class="title"> 
                                <span>购买手机</span>
                            </li>
                            <li class="item">
                                <span>小米Noto</span>
                                <span>小米4</span>
                                <span>红米</span>
                                <span>红米Noto</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>购买电视与平板</span>
                            </li>
                            <li class="item">
                                <span>小米电视</span>
                                <span>小米盒子</span>
                                <span>小米平板</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>路由器与智能硬件</span>
                            </li>
                            <li class="item">
                                <span>路由器</span>
                                <span>体重秤</span>
                                <span>净化器与滤芯</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>插线板、移动电源与电池</span>
                            </li>
                            <li class="item">
                                <span>小米移动电源</span>
                                <span>电池</span>
                                <span>充电器</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>耳机音箱与储存卡</span>
                            </li>
                            <li class="item">
                                <span>小米头戴式耳机</span>
                                <span>小米活塞耳机</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>保护套与贴膜</span>
                            </li>
                            <li class="item">
                                <span>保护套/保护壳</span>
                                <span>贴膜</span>
                                <span>防尘塞</span>                            
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>后盖与个性化配件</span>
                            </li>
                            <li class="item">
                                <span>米键</span>
                                <span>后盖</span>
                                <span>贴纸</span>                            
                                <span>手机支架</span>
                            </li>
                        </ul>
                        <ul>
                            <li class="title"> 
                                <span>小米生活方式</span>
                            </li>
                            <li class="item last">
                                <span>服装</span>
                                <span>米兔</span>
                                <span>背包</span>                            
                                <span>生活周边</span>                            
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-menu">
                    <ul class="sort-nav">
                        <li>
                            <span>首页</span>
                        </li>
                        <li>
                            <span>
                                小米手机
                            </span>
                            </li>
                        <li>
                            <span>红米</span>
                        </li>
                        <li>
                            <span>小米平板</span>
                        </li>
                        <li>
                            <span>小米电视</span>
                        </li>
                        <li>
                            <span>盒子</span>
                        </li>
                        <li>
                            <span>路由器</span>
                        </li>
                        <li>
                            <span>合约机</span>
                        </li>
                        <li>
                            <span>服务</span>
                        </li>
                        <li>
                            <span>社区</span>
                        </li>
                    </ul>
                    <div class="banner">
                        <div class="banner-list" id="list">
                            <img src="./images/banner5.png" alt="" >
                            <img src="./images/banner4.png" alt="" > 
                            <img src="./images/banner1.png" alt="">
                            <img src="./images/banner2.png" alt="" >
                            <img src="./images/banner3.png" alt="" >
                            
                            
                        </div>
                        <button id="prev"></button>
                        <button id="next"></button>
                        <div class="banner-btn" id="btn">
                            <span class="select">1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                        </div>
                    </div>
                    <div class="bottom-item">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./images/01.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/02.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/03.png" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-product">
            <div class="product-container">
                <div class="product-info">
                    <span class="info-l left">小米明星单品</span>
                    <span class="info-r left">根据机型选择配件</span>
                    <span class="btn-l right"></span>
                    <span class="btn-r right"></span>
                </div>
                <div class="product">
                    <ul class="product-list">
                        <li>
                            <div>
                                <a href="#">
                                    <img src="./images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                                </a>
                            </div>
                            <p class="product-name">小米智能插座</p>
                            <span>让普通家电变得智能</span>
                        </li>
                        <li>
                            <div>
                                <a href="#">
                                    <img src="./images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                                </a>
                            </div>
                            <p class="product-name">小米空气净化器</p>
                            <span>高性能智能空气净化器立即预约</span>
                        </li>
                        <li>
                            <div>
                                <a href="#">
                                    <img src="./images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
                                </a>
                            </div>
                            <p class="product-name">小米活塞耳机简装版</p>
                            <span>好声音源自活塞式音腔，延续经典设计</span>
                        </li>
                        <li>
                            <div>
                                <a href="#">
                                    <img src="./images/aa.jpg" alt="">
                                </a>
                            </div>
                            <p class="product-name">小米路由器</p>
                            <span>顶级双屏幕AC智能路由，内置1TB大硬盘</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="new-product">
            <div class="top-title">
                <span class="title-left">新品上架</span>
                <span class="title-right">更多></span>
            </div>
            <div class="new-left">
                <div class="wrap">
                    <div class="item item-top">
                        <a href="#">
                            <img src="./images/fanghezi0407xiao.jpg" alt="">
                        </a>
                    </div>
                    <div class="item item-top item_2">
                        <a href="#">
                            <img src="./images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                        </a>
                        <span class="top">小米手环</span>
                        <span class="down">79元</span>
                    </div>

                    <div class="item item-centermore">
                        <ul>
                            <li>
                                <div class="top_1">
                                    <a href="#">
                                        <img src="./images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
                                    </a>
                                    <span class="top">5周年米兔钥匙扣</span>
                                    <span class="down">9.9元</span>
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li>
                                <div class="down_1">
                                    <a href="#">
                                        <img src="./images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                                    </a>
                                    <span class="top">QCY派Q8蓝牙耳机</span>
                                    <span class="down">59.9元</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="item item-center">
                        <a href="#">
                            <img src="./images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                        </a>
                        <span class="top">小米T恤路标MILOGO</span>
                        <span class="down">39元</span>
                    </div>
                    <div class="item item-center">
                        <a href="#">
                            <img src="./images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
                        </a>
                        <span class="top">小米4实木后盖</span>
                        <span class="down">69元</span>
                    </div>

                    <div class="item item-bottom">
                        <a href="#" class="first">
                            <img src="./images/baohuke.png" alt="">
                        </a>
                        <span class="top">小米Note超薄保护壳</span>
                        <span class="down">49元</span>
                    </div>
                    <div class="item item-bottom">
                        <a href="#">
                            <img src="./images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                        </a>
                        <span class="top">小米自拍杆</span>
                        <span class="down">49元</span>
                    </div>
                    <div class="item item-bottom">
                        <a href="#">
                            <img src="./images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                        </a>
                        <span class="top">先锋CL31系列耳式耳机</span>
                        <span class="down">99元</span>
                    </div>
        
                </div>

            </div>
            <div class="new-right">
                <div class="right-product">
                    <div class="product-part">
                        <a href="#">
                            <img src="./images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                        </a>
                    </div>
                    <div class="product-des">
                        <p class="tejia">特价商品</p>
                        <span class="des-title">SanDisk32GB储存卡</span>
                        <p>
                            <span class="new-price">79元</span>
                            <span class="old-price">109元</span>
                        </p>
                        <span>还有更多特价商品</span>
                    </div>
                </div>
                <div class="right-product">
                    <div class="product-part">
                        <a href="#">
                            <img src="./images/channel-list-cool.jpg" alt="">
                        </a>
                    </div>
                    <div class="product-des">
                        <span class="des-title">特惠配件套餐</span>
                        <p>手机必备配件组合购买</p>
                        <span>实惠更优惠</span>
                    </div>
                </div>
                <div class="right-product">
                    <div class="product-part">
                        <a href="#">
                            <img src="./images/channel-list-new.jpg" alt="">
                        </a>
                    </div>
                    <div class="product-des">
                        <span class="des-title">我爱酷玩</span>
                        <p>邂逅炫酷的电子产品</p>
                        <span>结交趣味相投的朋友</span>
                    </div>
                </div>
                <div class="mi-list">
                    <ul>
                        <li>
                            <p>
                                <span>企业用户采购渠道</span>
                                <span class="to">></span>
                            </p>
                            
                        </li>
                        <li>
                            <p>
                                <span>小米手机防伪查询</span>
                                <span class="to">></span>
                            </p>
                            
                        </li>
                        <li>
                            <p>
                                <span>小米手机官翻版</span>
                                <span class="to">></span>
                            </p>
                            
                        </li>
                        <li>
                            <p>
                                <span>小米路由器官翻版</span>
                                <span class="to">></span>
                            </p>
                            
                        </li>
                        <li>
                            <p>
                                <span>米粉红包</span>
                                <span class="to">></span>
                            </p>
                            
                        </li>
                    </ul>
                    <form action="">
                        <legend>话费充值</legend>
                       <div>
                            <input type="text"
                            placeholder="请输入手机号"
                            maxlength="11"
                            name="phone"
                            >
                       </div>
                        <div>
                            <select name="bill" id="bill" >
                                <option value="0" selected>100元</option>
                                <option value="1">200元</option>
                                <option value="2">300元</option>
                            </select>
                        </div>
                        <p>实付价格98.4元起</p>
                        <div>
                            <input type="submit" value="立即充值" class="liji">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="service">
            <div class="service-inner">
                <ul>
                    <li>
                        <img src="./images/10.png" alt="">
                        <p>1小时快修服务</p>
                    </li>
                    <li>
                        <img src="./images/11.png" alt="">
                        <p>7天无理由退货</p>
                    </li>
                    <li>
                        <img src="./images/12.png" alt="">
                        <p>15天免费换货</p>
                    </li>
                    <li>
                        <img src="./images/13.png" alt="">
                        <p>满150元包邮</p>
                    </li>
                    <li>
                        <img src="./images/14.png" alt="">
                        <p>520余家售后网点</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="help">
            <div class="help-inner">
                <div class="help-nav">
                    <p>帮助中心</p>
                    <ul>
                        <li>购物指南</li>
                        <li>支付方式</li>
                        <li>配送方式</li>
                    </ul>
                </div>
                <div class="help-nav">
                    <p>服务支持</p>
                    <ul>
                        <li>售后政策</li>
                        <li>自助服务</li>
                        <li>相关下载</li>
                    </ul>
                </div>
                <div class="help-nav">
                    <p>小米之家</p>
                    <ul>
                        <li>小米之家</li>
                        <li>服务网店</li>
                        <li>预约亲临到店服务</li>
                    </ul>
                </div>
                <div class="help-nav">
                    <p>关于小米</p>
                    <ul>
                        <li>了解小米</li>
                        <li>加入小米</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div class="help-nav">
                    <p>关注我们</p>
                    <ul>
                        <li>新浪微博</li>
                        <li>小米部落</li>
                        <li>官方微信</li>
                    </ul>
                </div>
                <div class="customer-service">
                    <p class="num">400-100-5678</p>
                    <p class="zhou">周一至周日8：00-18：00</p>
                    <p class="zhou">(仅收市话费)</p>
                    <button>24小时在线客服</button>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="copyright-inner">
                <p class="website">
                    <a>小米旗下网站：</a>
                    <a href="#">小米网</a>
                    <span>|</span>
                    <a href="#">MIUI</a>
                    <span>|</span>
                    <a href="#">米聊</a>
                    <span>|</span>
                    <a href="#">多看书城</a>
                    <span>|</span>
                    <a href="#">小米路由器</a>
                    <span>|</span>
                    <a href="#">繁体香港</a>
                    <span>|</span>
                    <a href="#">繁体台湾</a>
                    <span>|</span>
                    <a href="#">English</a>
                    <span>|</span>
                    <a href="#">小米后院</a>
                    <span>|</span>
                    <a href="#">小米天猫店</a>
                    <span>|</span>
                    <a href="#">小米淘宝直营店</a>
                    <span>|</span>
                    <a href="#">小米网盟</a>                   
                </p>
                <p>
                    <span>©mi.com 京ICP证110507号</span>
                    <span>京ICP备10046444号</span>
                    <span>京公网安备1100394845号</span>
                    <span>京网文[2014]0059-0009号</span>
                </p>
                <div>
                    <img src="./images/16.png" alt="">
                    <div class="zh">
                        <select name="language" id="language">
                            <option value="0" selected>简体中文</option>
                            <option value="1">繁体中文</option>
                            <option value="2">English</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            let index=0;

            $("#next").click(function(){
                index++;
                // 实现一个轮回 右箭头
                if(index>4){
                    index=0
                }
                console.log(index);
                show(index);
            })
            $("#prev").click(function(){
                index--;
                // 实现一个轮回 左箭头
                if(index<0){
                    index=$("#list img").length-1;
                }
                console.log(index);
                show(index);
            })

            $("#btn span").click(function(){
                let i =$(this).index();
                console.log(i);
                // 点击焦点后需要重置index的值
                index=i
                show(i);
                
            })
        })

        function show(index){
            $("#list img").eq(index).fadeIn().siblings().fadeOut();
                // 焦点随图片变换
            $("#btn span").eq(index).addClass("select").siblings().removeClass("select");
        }
    </script>
</body>
</html>